<template>
     <div>
        <div ref="editorElem" style="text-align: left;"></div>
     </div>
</template>

<script>
 import E from "wangeditor";
 import {ROAST_CONFIG} from '@/config.js';
 import UploadAPI from '@/api/upload.js';
 export default {
   name: "Editor",
   data() {
     return {
       editor: null,
       editorContent: '',
     };
   },
   // catchData是一个类似回调函数，来自父组件，当然也可以自己写一个函数，主要是用来获取富文本编辑器中的html内容用来传递给服务端
   props: ['catchData','child_content'], // 接收父组件的方法,content表示内容
   watch:{
     child_content(val){
        this.editor.txt.html(this.child_content);
     }
   },
   mounted() {
     let that=this;
     this.editor = new E(this.$refs.editorElem);
     // 编辑器的事件，每次改变会获取其html内容
     this.editor.config.onchange = html => {
       this.editorContent = html;
       this.catchData(this.editorContent);  //把这个html通过catchData的方法传入父组件
     };
     this.editor.config.uploadImgServer = ROAST_CONFIG.API_URL+'/editorupload';
     //后台接收的文件参数
     this.editor.config.uploadFileName = "editor_file";
      // 隐藏“网络图片”tab
     //this.editor.config.showLinkImg = false
    // 将图片大小限制为 3M
    this.editor.config.uploadImgMaxSize = 3 * 1024 * 1024;
    this.editor.config.debug = true;
    this.editor.config.pasteTextHandle = function (content) {
            // content 即粘贴过来的内容（html 或 纯文本），可进行自定义处理然后返回
            let body_index=content.indexOf('<body');
            let new_content=content.substring(body_index);
            return new_content;
    }
    //是否设置cookie
    this.editor.config.withCredentials = false;
    //图片上传hooks
    this.editor.config.customUploadImg = function (files, insert) {
      let fd=new FormData();
      for(var index in files){
          fd.append('file[]',files[index]);
      }
      axios.post(ROAST_CONFIG.API_URL+'/image-upload',fd,{
            headers: {
              'Content-Type': 'multipart/form-data',
              'Authorization': that.$store.getters.getSessionId
            }
      }).then(function(response){
          if(response.data.code==1){
             for(var i in response.data.urls){
                insert(response.data.urls[i]);
             }
          }else{
             that.$message({
                 message:'图片上传失败',
                 type:'error',
                 duration:1000
             });
          }
      }).catch(function(res){
          that.$message({
              message:'服务器通信失败',
              type:'error',
              duration:1000
          });
      })
    }

    //设置字体
     this.editor.config.fontNames = [
            '宋体', '黑体', '楷体', '微软雅黑',
            'Arial', 'Verdana', 'Georgia'
        ];
     this.editor.config.menus = [
       // 菜单配置
       'head', // 标题
       'bold', // 粗体
       'fontSize', // 字号
       'fontName', // 字体
       'italic', // 斜体
       'underline', // 下划线
       'strikeThrough', // 删除线
       'foreColor', // 文字颜色
       'backColor', // 背景颜色
       'link', // 插入链接
       'list', // 列表
       'justify', // 对齐方式
       'quote', // 引用
       'image', // 插入图片
       'video',  // 插入视频
       'table', // 表格
       'undo', // 撤销
       'redo' // 重复
     ];
     this.editor.create(); // 创建富文本实例
  }
}
</script>
<style>
.w-e-menu {
    z-index: 2 !important;
  }
  .w-e-text-container {
    z-index: 1 !important;
  }
</style>
